<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1.0,user-scalable=no">
        <title>时间显示</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="shortcut icon" type="image/icon" href="icon.png">
    </head>

    <script>
        function startTime() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            // 在小于10的数字前加一个‘0’
            h = checkTime(h);
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
            t = setTimeout(function () { startTime() }, 320);
        }
        function greeting() {
            var today = new Date();
            var h = today.getHours();
            var jz;
            if (h>=0 && h<12) {
                jz = ",早上好！";
            }
            else if (h==12) {
                jz = ",中午好！";
            }
            else if (h>12 && h<19) {
                jz = ",下午好！";
            }
            else if (h>=19) {
                jz = ",晚上好！";
            }
            return jz;
            t = setTimeout(function () { greeting() }, 10000);
        }
        function showdate() {
            var today = new Date();
            var y = today.getFullYear();
            var mon = today.getMonth() + 1;
            var d = today.getDate();
            var greet = greeting();
            document.getElementById('date').innerHTML = "今天是" + y + "年" + mon + "月" + d + "日" + greet;
            t = setTimeout(function () { showdate() }, 10000);
        }
        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        function changeMode() {
            var element = document.body;
            element.classList.toggle("light-mode");
        }
    </script>

    <body onload="startTime(),showdate()">
        <div class="top">
            <div id="date"></div>
        </div>        
        <div id="time"></div>
        <div id="wenzi">深色/浅色模式&ensp;
            <label class="switch">
                <input type="checkbox" onclick="changeMode()">
                <span class="slider"></span>
            </label>
        </div>
    </body>

</html>
